<template>
  <div class="toolbar">
    <div>
      <ul class="menu">
          <li><a href="#" @click="openFile">打开</a></li>
          <li><a href="#" @click="save">保存</a></li>
          <li><a href="#" @click="reload">刷新</a></li>
          <li><a href="#" @click="openDevTools">工具</a></li>
      </ul>
    </div>
    <div style="-webkit-app-region:drag"></div>
    <div class="toolbar_icon">
      <div @click="min"><i class="el-icon-minus"></i></div>
      <div @click="max"><Icon :type="maxIcon" style="font-weight: bold;"/></div>
      <div @click="close"><i class="el-icon-close"></i></div>
    </div>
  </div>
</template>

<script>
import { Icon } from 'view-design'
const fs = window.require('fs')
const { dialog } = window.require('electron').remote
const ipcRenderer = window.require('electron').ipcRenderer

export default {
  name: 'Home',
  components: { Icon },
  data () {
    return {
      maxIcon: 'ios-square-outline'
    }
  },
  methods: {
    save () {
      var data = {
        layout: this.$store.getters.sortLayout,
        background: this.$store.getters.getBackground
      }
      console.log(data)
      var json = JSON.stringify(data, null, '\t')
      var options = {
        title: '保存',
        filters: [
          { name: 'txt', extensions: ['json'] }
        ]
      }
      var filename = dialog.showSaveDialog(options
      ).then(result => {
      filename = result.filePath
      if (filename === undefined) {
        console.log('the user clicked the btn but didn\'t created a file')
        return
      }
      fs.writeFile(filename, json, (err) => {
        if (err) {
         console.log('an error ocurred with file creation ' + err.message)
          return
        }
        this.$message({
          message: '保存成功',
          type: 'success'
        })
      })
    }).catch(err => {
      console.log(err)
    })
    },
    openFile () {
      var options = {
        title: '文件',
        properties: ['openFile'],
        filters: [
          { name: 'Text', extensions: ['json'] }
        ]
      }
      dialog.showOpenDialog(options).then(result => {
        if (!result.canceled) {
          console.log(result)
          console.log(result.filePaths)
          var data = fs.readFileSync(result.filePaths[0])
          var newState = JSON.parse(data.toString())
          console.log(newState)
          this.$store.commit('updateLayout', newState.layout)
          this.$message({
          message: '打开成功',
          type: 'success'
        })
        }
      }).catch(err => {
        console.log(err)
        this.$message({
          message: '打开错误',
          type: 'error'
        })
      })
    },
    min () {
      ipcRenderer.send('window-min')
    },
    max () {
      this.maxIcon === 'ios-browsers-outline' ? this.maxIcon = 'ios-square-outline' : this.maxIcon = 'ios-browsers-outline'
      ipcRenderer.send('window-max')
    },
    close () {
      this.$confirm('退出前请确保已保存文件到本地', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ipcRenderer.send('window-close')
        }).catch(() => {
        })
    },
    reload  () {
      ipcRenderer.send('window-reload')
    },
    openDevTools  () {
      ipcRenderer.send('openDevTools')
    }
  }
}
</script>

<style scoped>
    .toolbar {
        width:100%;
        background: linear-gradient(to top, rgb(220, 209, 209), rgb(186, 172, 172));
        display:grid;
        grid-template-rows: 20px;
        grid-template-columns: 200px 1fr 100px;
      }
    .toolbar .menu {
      list-style:none;
      margin: 0
    }
    .toolbar .menu li {
      float: left;
      line-height: 20px;
      height:20px;
      text-align: center;
      margin-left: 5px;
    }
    a, a:hover {
      font-family: Georgia, 'Times New Roman', Times, serif;
      color:black;
      line-height: 20px;
    }
    a:hover {
      background-color: rgb(176, 165, 154);
    }
    .toolbar_icon {
      display:grid;
      grid-template-rows: 20px;
      grid-template-columns: 1fr 1fr 1fr;
    }
    .toolbar_icon div:hover {
      background-color: rgb(176, 165, 154);
    }
</style>
